<template>
  <header class="header">
    <h1>todos</h1>
    <input v-model="all" id="toggle-all" class="toggle-all" type="checkbox" />
    <label for="toggle-all"></label>
    <input
      v-model.trim="text"
      class="new-todo"
      placeholder="输入任务名称-回车确认"
      autofocus
      @keydown.enter="add"
    />
  </header>
</template>

<script>
export default {
  data() {
    return {
      text: ''
    }
  },
  props: {
   getSlect: {
     type: Boolean,
     required: true
   },
  },
  computed: {
    all: {
      set(val) {
        this.$emit('all', val);
      },
      get() {
        return this.getSlect
      },
    },
  },
  methods: {
    add() {
      if (this.text.length === 0)
        return this.$prompt.show("请输入要添加的名字！");
      this.$emit("addClick", this.text);
      this.$prompt.show("添加成功！");
      this.text = "";
    },
  },
};
</script>